<template>
  <div class="sy-container">
    <section class="sy1">
    <section class="sy1 chj_thematic_banner">

        <img src="~/assets/img/chjm_gsfw.JPG" alt="">
    </section>

    </section>
    <section class="gs1">
      <div>
        <ul class="ct">
          <li v-for="(data,id) in title.zym.service" :class="'li'+id" :key="id"  @click="xqymtz(data.id,data.pid)">
            <p>{{data.servicename}}</p>
          </li>
        </ul>
      </div>
    </section>
    <section class="gs2">
      <h4>精选工商服务<span>专业代办一对一服务</span></h4>
      <p>助您快速创业，提供企业各发展阶段服务<a :href="title.gj[0].cclink">立即咨询></a></p>
    </section>
    <section class="gs3 sy">
      <h3>{{title.zym.service[0].servicename}}<span>{{title.zym.service[0].remark}}</span><em @click="bar(2,2)">更多</em></h3>
      <ul>
        <li v-for="(data,id) in title.zym.service[0].threeServiceRes.slice(0,4)" :class="'li'+id" :key="id"  @click="xqymtz(data.id,data.pid)">
          <img :src="'https://exam.zhonghaiqihang.com'+data.fouriconimg">
          <p>{{data.servicename}}</p>
        </li>
      </ul>
    </section>

    <section class="gs4 sy">
      <h3>{{title.zym.service[1].servicename}}<span>{{title.zym.service[1].remark}}</span><em @click="bar(7,7)">更多</em></h3>
      <div class="wb">
        <ul>
          <li v-for="(data,id) in title.zym.service[1].threeServiceRes.slice(0,4)" :class="'li'+id" :key="id" @click="xqymtz(data.id,data.pid)">
            <div>
              <img :src="'https://exam.zhonghaiqihang.com'+data.fouriconimg">
            </div>
            <p>{{id==1?'注册资本变更':data.servicename}}</p>
          </li>
        </ul>
      </div>
    </section>


    <section class="gs5 sy">
      <h3>{{title.zym.service[3].servicename}}<em @click="bar(24,24)">更多</em></h3>
      <div class="tp">
        <h4>{{title.zym.service[3].servicename}}</h4>
        <p>{{title.zym.service[3].remark}}</p>
      </div>
      <ul>
        <li v-for="(data,id) in title.zym.service[3].threeServiceRes.slice(0,6)" :class="'li'+id" :key="id" @click="xqymtz(data.id,data.pid)">
          <img :src="'https://exam.zhonghaiqihang.com'+data.fouriconimg">
          <p>{{data.servicename}}</p>
        </li>
      </ul>
    </section>
    <section class="gs6 sy">
      <h3>{{title.zym.service[2].servicename}}<span>{{title.zym.service[2].remark}}</span><em @click="bar(14,14)">更多</em></h3>
      <ul>
        <li v-for="(data,id) in title.zym.service[2].threeServiceRes.slice(0,4)" :class="'li'+id" :key="id" @click="xqymtz(data.id,data.pid)">
          <img :src="'/img/m-gs6'+id+'.png'">
          <p>{{data.servicename}}</p>
        </li>
      </ul>
    </section>
    <section class="gs7 sy">
      <h3>{{title.zym.service[4].servicename}}<span>{{title.zym.service[4].remark}}</span><em @click="bar(39,39)">更多</em></h3>
      <ul>
        <li v-for="(data,id) in title.zym.service[4].threeServiceRes.slice(0,4)" :class="'li'+id" :key="id" @click="xqymtz(data.id,data.pid)">
          <img :src="'https://exam.zhonghaiqihang.com'+data.fouriconimg">
          <p>{{data.servicename}}</p>
        </li>
      </ul>
      <p class="bp"><span>注销内容：</span>清缴税控及发票、注销国税、地税；登报通知、注销工商营业执照；注销公章等</p>
    </section>

    <section class="sy sy8">
      <h3>咨询管家<span style="font-size: .19rem">专业管家在线服务，一对一免费咨询</span></h3>
      <div class="two zb">
        <ul class="ct zb">
          <li v-for="(data,id) in title.gj" :key="id" :class="'li'+id" :style="{background:'url('+'https://exam.zhonghaiqihang.com'+data.avatar+') no-repeat 0rem 0/3.4rem 2.69rem',width:'3.2rem',height:'2.69rem'}">
            <div class="top">
              <h4>{{data.username}}</h4>
              <p class="p2">经营资质顾问</p>
              <p class="p3">{{data.mobile}}</p>
            </div>
            <a @click="chj_gj(data,id)"  href="JavaScript:;">立即咨询</a>
          </li>
        </ul>
      </div>
    </section>
    <section class="sy sy9" style="margin-top: .18rem">
      <h3>用心对待<span>一个互联网服务品牌 企业服务智能升级的实践者</span> <em>更多</em></h3>
      <ul>
        <li><img src="~/assets/img/m-sy91.png">
          <p>快速响应</p>
        </li>
        <li><img src="~/assets/img/m-sy92.png">
          <p>信息安全</p>
        </li>
        <li><img src="~/assets/img/m-sy93.png">
          <p>进度掌握</p>
        </li>
        <li><img src="~/assets/img/m-sy94.png">
          <p>专属服务</p>
        </li>
        <li><img src="~/assets/img/m-sy95.png">
          <p>提供售后</p>
        </li>
      </ul>

    </section>
  </div>
</template>

<script>
  import axios from 'axios';
  import $ from 'jquery';

  // import Logo from '~/components/Logo.vue'
  export default {
    components: {
      // Logo
    },
    data(){
      return{
        datas:null,
        swiperOption: {
          loop: true,
          slidesPerView: 'auto',
          centeredSlides: true,
          autoplay:{
            delay:5000,
            disableOnInteraction:false,
            spaceBetween:5000,
            loop:true,
          },
          spaceBetween: 30,
          pagination: {
            el: '.swiper-pagination',
            dynamicBullets: true
          },
          on: {
            slideChange() {
            },
            tap() {
            }
          }
        }

      }
    },
    async asyncData ({ params }) {
    let nh2 = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/Special/specialData`,{
      params:{
        serviceid:'1'
      }});
    let nh3 = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/Receptionist/receptionistData`);
    let data  = {zym:nh2.data,gj:nh3.data};
    return { title: data}
  },
  head () {
    return {
      title: this.title.zym.oneService.title,
      meta: [
        { hid: 'description', name: 'description', content: this.title.zym.oneService.descript},
        { hid: 'keywords', name: 'keywords', content:this.title.zym.oneService.keyword }
      ]
    }
  },
  // middleware: 'statsm',
  mounted:function(){
    $('header').show();
    // function IsPC() {
    //   var userAgentInfo = navigator.userAgent;
    //   var Agents = ["Android", "iPhone",
    //     "SymbianOS", "Windows Phone",
    //     "iPad", "iPod"];
    //   var flag = true;
    //   for (var v = 0; v < Agents.length; v++) {
    //     if (userAgentInfo.indexOf(Agents[v]) > 0) {
    //       flag = false;
    //       break;
    //     }
    //   }
    //   return flag;
    // }
    // if(IsPC()){
    //   this.$router.push('/Business');
    // }else{
    //
    // }


  },
  methods:{
    chj_gj:function(e1,e2){
      let href = '/Mobile/visitingCard/'+e1.id
      location.href = href;
    },
    xqymtz:function(e1,e2){

      let href = '/Mobile/ServiceDetails/'+e1+'?name='+e2;
      location.href = href;
    },
     bar:function(e1,e2){
       let href = '/Mobile/ServiceDetails/'+e1+'?name='+e2;
       location.href = href;
     }

  }

  }
</script>

<style>

</style>
